<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>到岗到位</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" :formData="formData" :labelWidth="'150px'">
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" @select="handleSelectionChange" :paginationAtrrs="paginationAtrrs"
        @pageChange="handleSizeChange" :compRef="table.compRef" ref="gjxm" :columns="table.columns" :title="table.title"
        :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <!-- 弹窗信息 -->
    <LsdDialog :dialogConfig="dialogConfig" @handleBtn="handleBtn" @close="Qxiao">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames"
        :class="type == 3 ? 'is-view' : ''">
        <!-- 信息来源表单 -->
        <DialogForm ref="sourceFormComponent" slot="slot1" :formConfig="sourceFormConfig"
          @changeEvent="eventChangeSelected" />
        <el-descriptions slot="slot1"
          :labelStyle="{ display: 'inline-block', width: '167px', 'text-align': 'right', 'padding-right': '0px', 'margin-right': '0', 'box-sizing': 'border-box' }"
          :column="2" :colon="false">
          <el-descriptions-item label="事件类别：">{{ eventDataForm.eventName || '' }}</el-descriptions-item>
          <el-descriptions-item label="响应级别：">{{ eventDataForm.responseLvName || '' }}</el-descriptions-item>
          <el-descriptions-item label="影响范围：">{{ eventDataForm.effectRange || '' }}</el-descriptions-item>
          <el-descriptions-item label="影响时间：">{{ eventDataForm.effectTime }}
          </el-descriptions-item>
          <el-descriptions-item label="事件概要：">{{ eventDataForm.incidentOutline || '' }}</el-descriptions-item>
        </el-descriptions>
        <!-- 计划表单 -->
        <DialogForm ref="planFormComponent" slot="slot2" :formConfig="planFormConfig" @getResourcesData="getResourcesData"
          class="planFormComponent" @changeEvent="changeForm" />
        <div style="padding-left: 167px;" slot="slot2">
          <el-table border :data="selected_persons" style=""
            :header-cell-style="{ background: '#B1C8F9', color: '#000000', border: '1px solid #ccc' }"
            class="person-table">
            <el-table-column type="index" align="center" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="accountName" label="人员" align="left">
            </el-table-column>
            <el-table-column prop="unit" label="单位" align="center">
            </el-table-column>
            <el-table-column prop="dept" label="部门" align="center">
            </el-table-column>
            <el-table-column prop="duty" label="职务" align="center">
            </el-table-column>
          </el-table>
        </div>
        <!-- 任务下发（创建人） -->
        <DialogForm ref="createFormComponent" slot="slot3" :formConfig="taskFormConfig" />
      </LsdDialogTitle>
    </LsdDialog>
    <!-- 弹窗信息选择人员 -->
    <LsdDialog :dialogConfig="personDialogConfig" @handleBtn="handlePersonDialogBtn" @close="close1">
      <Person slot="dialog" style="width: 100%;" @select="personSourceSelected"></Person>
    </LsdDialog>
    <!-- 到岗到位弹窗 -->
    <LsdDialog :dialogConfig="inJobDialogConfig" class="inJobDialog" @close="closeInJob">
      <LsdTable slot="dialog" :compRef="inJobList.compRef" ref="gjxm" :columns="inJobList.columns"
        :tableData="inJobList.tableData" :tableAttr="inJobList.tableAttr" :isShowPage="inJobList.isShowPage"
        :isSequenceFlag="inJobList.isSequenceFlag" :autoHeight="inJobList.autoHeight" />
    </LsdDialog>
  </div>
</template>

<script>
import {
  getListApi,
  addApi,
  updateApi,
  getByIdApi,
  // getAllResponseApi,
  submitApi,
  delApi,
  exportFileApi,
  GetResponse
} from "@/api/EmergencyDisposal/dgdw.js";
// import { personSeletedsConfig, personSelectSource } from "./config"
import { getDictByGroup, listAccountByOrganization } from "@/api/common";
import Person from "./components/Persons";
import common from "@/utils/common.js";
import { showTime } from "@/lib";
import { TestUserOption } from "@/api/EmergencyDisposal/yjzhb.js";
export default {
  name: "OnDutyList",
  components: { Person },
  data() {
    return {
      // personSeletedsConfig, // 人员选择后
      // personSelectSource, // 人员选择前
      type: 0, // 0 新增 1编辑 2审核 3查看
      multipleSelection: [],
      // 筛选信息
      formData: [
        {
          elType: "input",
          id: "responseName",
          label: "响应命令单",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "select",
          id: "eventCode",
          label: "事件类别",
          dic: "dic_sjlb",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "select",
          id: "responseLvCode",
          label: "响应级别",
          dic: "dic_xyjb",
          attrs: {
            value: "",
            clearable: true,
            size: "small",
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "dateTimePicker",
          id: "effectTime",
          label: "影响时间",
          attrs: {
            value: "",
            clearable: true,
            size: "small",
            type: "datetimerange",
            "start-placeholder": "开始日期",
            "end-placeholder": "结束日期",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        },
        {
          elType: "input",
          id: "arrivePostPlanName",
          label: "到岗到位计划名称",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "dateTimePicker",
          id: "arrivePostTime",
          label: "计划到岗到位时间",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            type: "datetimerange",
            "start-placeholder": "开始日期",
            "end-placeholder": "结束日期",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        }
      ],
      // 表格信息
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "到岗到位计划列表",
        actions: [
          {
            id: "addPlanDialog",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          },
          {
            id: "onExport",
            text: "导出",
            type: "",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "arrivePostPlanName",
            label: "到岗到位计划名称",
            align: "left",
            "min-width": "230px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      class='commonTableStyle'
                      style='width:100%'
                      {...{
                        on: {
                          click: () => {
                            this.openView(row.id);
                          }
                        }
                      }}
                    >
                      {row.arrivePostPlanName}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "eventName",
            label: "事件类别",
            align: "center"
          },
          {
            prop: "responseLvName",
            label: "响应级别",
            align: "center"
          },
          {
            prop: "effectRange",
            label: "影响范围",
            align: "left"
          },
          {
            prop: "effectTime",
            label: "影响时间",
            align: "left",
            "min-width": "140px"
          },

          {
            prop: "arrivePostTime",
            label: "计划到岗到位时间",
            align: "center",
            "width": "180px"
          },
          {
            prop: "userInfo",
            label: "到岗到位人员",
            align: "left",
            "min-width": "180px",
            "show-overflow-tooltip": true
          },
          {
            prop: "responseName",
            label: "响应命令单",
            align: "left",
            "min-width": "230px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      class='commonTableStyle'
                      style='width:100%'
                      {...{
                        on: {
                          click: () => {
                            // 查看响应命令单
                            this.toResponse(row.responseId);
                          }
                        }
                      }}
                    >
                      {row.responseName}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "arriveState",
            label: "状态",
            align: "center",
            "min-width": "80px",
            formatter: (row, column, cellValue, index) => {
              // console.log(row)
              const { submitState } = row;
              if (submitState === "0") {
                return "编辑中";
              } else {
                return "已发布";
              }
            }
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "180px",
            render: (h, scope) => {
              let arr = [];
              const tbPower = this.common.isHasPower("tbr");
              if (scope.row.submitState === "0" && scope.row.arriveState === "0" && tbPower) {
                arr = ["编辑", "删除"];
              } else if (scope.row.submitState === "1" && tbPower) {
                arr = ["查看", "到岗到位情况"];
              }
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div>
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          // "max-height": "430px",
          // height: "430px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
        // "page-sizes": [10, 20, 30, 40, 50, 100]
      },
      activeNames: ["1", "2", "3", "4"], // 折叠面板默认展开列
      form: {
        responseName: "", // 响应命令单id
        eventCode: "", // 事件类别
        responseLvCode: "", // 响应级别
        effectTime: "", // 影响时间
        effectStartTime: "", // 影响开始时间
        effectEndTime: "", // 影响结束时间
        arrivePostPlanName: "", // 到岗到位计划名称
        arrivePostTime: "",
        arrivePostStartTime: "", // 到岗到位开始
        arrivePostEndTime: "" // 到岗到位结束
        // submitState: ""
      }, // 筛选from
      pageNum: 1,
      pageSize: 10,
      // 弹窗信息
      dialogConfig: {
        title: "到位到岗计划",
        isShow: false, // 弹窗显示隐藏
        btnList: []
      },
      personDialogConfig: {
        title: "到位到岗人员选择",
        isShow: false, // 弹窗显示隐藏
        btnList: [
          {
            name: "确认",
            id: "personDialogConfirm", // 事件名
            type: "primary",
            size: "small"
          },
          {
            name: "取消",
            id: "personDialogCancel",
            size: "small"
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "信息来源",
          name: "1",
          slot: "slot1"
        },
        {
          title: "到岗到位计划",
          name: "2",
          slot: "slot2"
        },
        {
          title: "任务下发",
          name: "3",
          slot: "slot3"
        }
      ],
      // 信息来源表单
      sourceFormConfig: {
        formData: [
          {
            type: "select",
            label: "响应命令单",
            prop: "responseId",
            class: "sjgy",
            lableWidth: "167px",
            option: [],
            name: "responseName",
            isDisabled: false
          }
        ],
        rules: {
          responseId: [
            { required: true, message: "请选择响应命令单", trigger: "change" }
          ]
        }
      },
      // 到岗到位计划表单
      planFormConfig: {
        formData: [
          {
            type: "input",
            label: "到岗到位计划名称",
            prop: "arrivePostPlanName",
            class: "sjgy",
            lableWidth: "167px"
          },
          {
            type: "dataPicker",
            label: "计划到岗到位时间",
            prop: "arrivePostTime",
            class: "sjgy",
            // 小于当前时间禁用
            pickerOption: {
              disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7;
              }
            },
            dateType: "datetime",
            lableWidth: "167px"
          },
          {
            type: "select",
            label: "到岗到位人员",
            value: "人员选择",
            prop: "arrivePostHuman",
            class: "sjgy",
            lableWidth: "167px",
            Name: "arrivePostHuman",
            multiple: true,
            option: [],
            filterable: true
          }

        ],
        rules: {
          arrivePostPlanName: [
            {
              required: true,
              message: "请输入到岗到位计划名称",
              trigger: "blur"
            }
          ],
          arrivePostTime: [
            {
              required: true,
              message: "请选择计划到岗到位时间",
              trigger: "change"
            }
          ]
        }
      },
      // 审批意见
      approveFormConfig: {
        formData: [
          {
            type: "input",
            label: "审批意见",
            prop: "emergencyEvent",
            class: "sjgy",
            lableWidth: "167px"
          },
          {
            type: "input",
            label: "填报人",
            isDisabled: true,
            prop: "creator",
            // class: "third",
            lableWidth: "167px"
          },
          {
            type: "input",
            label: "单位及部门",
            isDisabled: true,
            // class: "third",
            prop: "createDeptName",
            lableWidth: "140px"
          },
          {
            type: "input",
            label: "填报时间",
            isDisabled: true,
            class: "third",
            prop: "createTime",
            lableWidth: "140px"
          }
        ]
      },
      // 任务下发表单
      taskFormConfig: {
        formData: [
          {
            type: "input",
            label: "发布人",
            isDisabled: true,
            prop: "creator",
            // class: "third",
            lableWidth: "167px"
          },
          {
            type: "input",
            label: "单位及部门",
            isDisabled: true,
            // class: "third",
            prop: "createDeptName",
            lableWidth: "100px"
          },
          {
            type: "input",
            label: "下发时间",
            isDisabled: true,
            class: "third",
            prop: "createTime",
            lableWidth: "130px"
          }
        ]
      },
      // 到岗到位弹窗配置
      inJobDialogConfig: {
        title: "到岗到位情况",
        isShow: false // 弹窗显示隐藏
      },
      // 到岗到位情况列表
      inJobList: {
        autoHeight: true,
        isSelectFlag: false, // 是否展示选择器
        compRef: "inJobList",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: false, // 是否展示分页
        resetFlag: false,
        loading: false,
        title: "",
        actions: [],
        tableData: [],
        columns: [
          {
            // prop: "userName",
            prop: "accountName",
            label: "人员",
            align: "center"
          },
          {
            // prop: "unitDept",
            prop: "unit",
            label: "单位",
            align: "center",
            width: "240px"
          },
          {
            // prop: "deptName",
            prop: "dept",
            label: "部门",
            align: "center"
          },
          {
            prop: "duty",
            label: "职务",
            align: "center"
          },
          {
            prop: "isNoticed",
            label: "是否已通知",
            align: "center",
            formatter: (row, column, cellValue, index) => {
              // console.log(row)
              const { isNoticed } = row;
              if (isNoticed === "0") {
                return "否";
              } else {
                return "是";
              }
            }
          },
          {
            prop: "noticedWay",
            label: "通知方式",
            align: "center",
            formatter: (row, column, cellValue, index) => {
              // console.log(row)
              const { noticedWay } = row;
              if (noticedWay === "0") {
                // return "短信通知";
                return "消息待办";
              } else {
                // return "系统通知";
                return "消息待办";
              }
            }
          },
          {
            prop: "isSign",
            label: "是否签到",
            align: "center",
            formatter: (row, column, cellValue, index) => {
              // console.log(row)
              const { isSign } = row;
              if (isSign === "0") {
                return "否";
              } else {
                return "是";
              }
            }
          },
          {
            prop: "signInTime",
            label: "签到时间",
            align: "center",
            width: "110px"
          },
          {
            prop: "signOutTime",
            label: "签退时间",
            align: "center",
            width: "110px"
          },
          {
            prop: "durationTime",
            label: "到岗时长",
            align: "center"
          }
        ],
        // 表格样式
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #dedede",
            "font-size": "16px"
          }
        }
      },
      personSeleteds: [],
      eventDataForm: {},
      selected_persons: [],
      options: [],
      status_type: 0,
      status: "",
      all_persons: [] // 全部人员
    };
  },
  watch: {
    "$route.query.status": {
      handler(newVal) {
        console.log(newVal);
        this.status = newVal || "";
        this.form.submitState = newVal || "";
        this.list();
      },
      deep: true
    }
  },
  computed: {
    getCreator() {
      const account = sessionStorage.getItem("account");
      const org = sessionStorage.getItem("org");
      const creator = {
        name: (account && JSON.parse(account).realName) || "",
        unit: (org && JSON.parse(org).unitName) || "",
        id: (org && JSON.parse(org).orgId) || "",
        dept: (org && JSON.parse(org).orgName) || ""
      };
      return creator;
    }
  },
  mounted() {
    if (JSON.parse(sessionStorage.getItem("role")).roleCode === "hb_spr") {
      this.table.actions = [];
    }
  },
  created() {
    const { status } = this.$route.query;
    this.status = status || "";
    this.form.submitState = status || "";
    this.getOptionsByDict();
    this.list();
    this.getAllResponse();
    // this.getPersons()

    this.getTestUserOption();
    this.GetListAccountByOrganization();

  },
  methods: {
    // 获取到岗到位人员
    async GetListAccountByOrganization() {
      const res = await listAccountByOrganization({ orgId: this.getCreator.id });
      // console.log(res, "resresresresres");
      const option = res.map((i) => {
        return {
          label: i.realName,
          value: i.id,
          ...i
        };
      });
      this.planFormConfig.formData[2].option = option;
    },

    changeForm(val, item) {
      if (val) {
        const filterArr = [];
        val.forEach(i => {
          filterArr.push(this.planFormConfig.formData[2].option.find(item => item.value == i));
        });
        const newArr = [];
        filterArr.forEach(item => {
          newArr.push({
            accountName: item.realName,
            dept: item.ssbmName,
            unit: item.orgName,
            duty: item.officeName,
            id: item.value
          });
        });
        // console.log('newArr', newArr);
        this.selected_persons = newArr;
      }
    },
    // 列表表格按钮事件
    actionHandle(item, scope) {
      if (item === "编辑") {
        this.HanEdit(scope.row.id);
        console.log(scope.row);
      } else if (item === "删除") {
        this.onDelPlan(scope.row.id);
      } else if (item === "查看") {
        this.openView(scope.row.id);
      } else if (item === "到岗到位情况") { // 查看到岗到位情况列表
        this.openInJob(scope.row);
      }
    },
    // 获取筛选项
    getOptionsByDict() {
      this.formData.forEach(item => {
        if (item.dic) {
          getDictByGroup({ groupCode: item.dic }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: Number(item.dicCode)
              };
            });
            item.options = option;
          });
        }
      });
    },
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.form.submitState = this.status;
      this.query();
    },
    // 检索
    query() {
      this.list();
    },
    async list() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.form
      };
      parmas.arrivePostStartTime = this.form.arrivePostTime.length ? this.form.arrivePostTime[0] : "";
      parmas.arrivePostEndTime = this.form.arrivePostTime.length ? this.form.arrivePostTime[1] : "";
      parmas.effectStartTime = this.form.effectTime.length ? this.form.effectTime[0] : "";
      parmas.effectEndTime = this.form.effectTime.length ? this.form.effectTime[1] : "";
      parmas.arrivePostTime = "";
      parmas.effectTime = "";
      const res = await getListApi(parmas);
      // console.log(res)
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
    },
    // 弹窗按钮点击事件 对应id绑定事件
    handleBtn(item) {
      this[item.id]();
    },
    // 确认选择人员按钮
    handlePersonDialogBtn(item) {
      this[item.id]();
    },
    // 人员选择
    personSourceSelected(val) {
      console.log(val);
      const { userList } = val;
      this.personSeleteds = userList;
    },
    // 人员选择确认按钮
    personDialogConfirm() {
      this.selected_persons = this.personSeleteds.length ? JSON.parse(JSON.stringify(this.personSeleteds)) : [];
      // 禁用已选人员
      this.handlePersonDisabel();
      this.$nextTick(() => {
        // this.personDialogCancel()
        this.personDialogConfig.isShow = false;
      });
    },
    // 人员选择取消按钮
    personDialogCancel() {
      this.personDialogConfig.isShow = false;
      this.personSeleteds = [];
    },
    // 人员选择
    getResourcesData() {
      this.personDialogConfig.isShow = true;
    },
    // 提交数据处理
    handleData() {
      this.$refs.sourceFormComponent.isValidate();
      this.$refs.planFormComponent.isValidate();


      const flag = this.$refs.sourceFormComponent.flag;
      const flag1 = this.$refs.planFormComponent.flag;


      const parmas = Object.assign({}, this.$refs.sourceFormComponent.form, this.$refs.planFormComponent.form, this.$refs.createFormComponent.form);

      console.log(parmas);
      parmas.arrivePostHuman = this.selected_persons.length ? this.selected_persons.map(item => item.id).join(",") : "";

      return {
        isValidate: flag && flag1,
        parmas
      };
    },
    // 保存
    async saveBtn() {
      const { isValidate, parmas } = this.handleData();
      if (isValidate) {
        try {
          let message = "";
          if (this.type == 0) {
            await addApi(parmas);
            message = "保存成功";
          } else {
            await updateApi(parmas);
            message = "编辑成功";
          }
          this.$message({
            message,
            type: "success"
          });
          this.list();
          this.Qxiao();

        } catch (error) {
          console.error(error);
        }
      }
    },
    // 提交
    async submitBtn() {
      const { isValidate, parmas } = this.handleData();
      if (isValidate) {
        try {
          let message = "";
          await submitApi(parmas);
          message = "提交成功";

          this.$message({
            message,
            type: "success"
          });
          this.list();
          this.Qxiao();

        } catch (error) {
          console.error(error);
        }
      }
    },
    // 取消
    Qxiao() {
      this.sourceFormConfig.formData[0].isDisabled = false;
      this.planFormConfig.formData[0].isDisabled = false;
      this.planFormConfig.formData[1].isDisabled = false;
      this.planFormConfig.formData[2].isDisabled = false;
      this.$refs.sourceFormComponent.form.responseId = "";
      this.planFormConfig.formData[2].class = "sjgy";

      this.selected_persons = [];

      this.$refs.sourceFormComponent.form = this.$refs.sourceFormComponent.$options.data().form;
      this.$refs.planFormComponent.form = this.$refs.planFormComponent.$options.data().form;
      this.$refs.createFormComponent.form = this.$refs.createFormComponent.$options.data().form;
      this.$nextTick(() => {
        this.$refs.sourceFormComponent.$refs.formInlines.clearValidate();
        this.$refs.planFormComponent.$refs.formInlines.clearValidate();
        this.$refs.createFormComponent.$refs.formInlines.clearValidate();
        this.eventDataForm = {};
        this.dialogConfig.isShow = false;
      });
    },
    // 弹窗关闭图标
    close1() {
      this.personDialogConfig.isShow = false;
    },
    // 抛出列表按钮
    onActionClick(item, index) {
      this[item.id](0); // 调用按钮对应方法
    },
    // 新增
    addPlanDialog(type) {
      this.dialogConfig.isShow = true;
      this.type = type;
      // const types = ["新增", "编辑", "审批", "查看"]
      let btnList = [];
      if (type == 0 || type == 1) {
        btnList = [
          {
            name: "提交",
            id: "submitBtn", // 事件名
            type: "primary",
            size: "small"
          },
          {
            name: "保存",
            id: "saveBtn",
            size: "small"
          }, {
            name: "取消",
            id: "Qxiao",
            size: "small"
          }
        ];
      }

      this.dialogConfig.btnList = btnList;
      // console.log(`type: ${types[type]}`)
      this.$nextTick(() => {
        this.$set(this.$refs.createFormComponent.form, "creator", this.getCreator.name);
        this.$set(this.$refs.createFormComponent.form, "createDeptName", sessionStorage.getItem("dwbmName"));
        // this.$set(this.$refs.createFormComponent.form, "createTime", new Date().toLocaleString().replace(/\//g, "-"))
        this.$set(this.$refs.createFormComponent.form, "createTime", showTime(new Date()));
      });
    },
    // 跳转响应命令单详情
    toResponse(id) {
      this.$router.push({
        name: "EmergencyResponseinfo",
        query: {
          id
        }
      });
    },
    // 导出操作
    onExport() {
      exportFileApi(this.form).then(res => {
        common.downloadByBlob(res, `应急到岗到位${new Date().getTime()}.xlsx`);
      });
    },
    // 选择器
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 编辑到岗计划
    HanEdit(id) {
      this.addPlanDialog(1);
      this.getDataDetail(id);
    },
    // 获取数据详情
    getDataDetail(id) {
      getByIdApi({ id }).then(res => {
        const { responseId, userList, responseName } = res;
        // console.log(this.$refs.sourceFormComponent);
        this.$set(this.$refs.sourceFormComponent.form, "responseId", responseId);
        this.$set(this.$refs.sourceFormComponent.form, "responseName", responseName);
        const filter = this.sourceFormConfig.formData[0].option.filter(item => item.id == responseId);
        this.selected_persons = userList && userList.length ? userList : [];
        // 禁用已选人员
        this.handlePersonDisabel();
        this.eventDataForm = filter[0];

        this.$set(this.$refs.planFormComponent.form, "id", res.id);
        this.$set(this.$refs.planFormComponent.form, "arrivePostPlanName", res.arrivePostPlanName);
        this.$set(this.$refs.planFormComponent.form, "arrivePostTime", res.arrivePostTime);

        this.$set(this.$refs.createFormComponent.form, "creator", res.creator);
        this.$set(this.$refs.createFormComponent.form, "createDeptName", res.createDeptName);
        this.$set(this.$refs.createFormComponent.form, "createTime", res.createTime);


      });
    },
    // 删除到岗计划
    onDelPlan(id) {
      this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delApi(id).then(res => {
          this.$message({
            type: "success",
            message: `删除成功`
          });
          this.list();
        });
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.list();
    },
    // 审批到岗计划操作
    onApproval(id) {
      this.addPlanDialog(2);
    },
    // 查看到岗到位情况列表
    openInJob(row) {
      getByIdApi({ id: row.id }).then(res => {
        console.log(res.userList);
        this.inJobList.tableData = res.userList || [];
        // this.inJobList.tableData = row.userList || [];
        this.inJobDialogConfig.isShow = true;
      });
    },
    // 查看到岗计划详情
    viewPlanDetail(row) {
      this.$message({
        type: "info",
        message: "查看到岗计划详情"
      });
    },
    // 查看到岗计划
    openView(id) {
      this.sourceFormConfig.formData[0].isDisabled = true;
      this.planFormConfig.formData[0].isDisabled = true;
      this.planFormConfig.formData[1].isDisabled = true;
      this.planFormConfig.formData[2].isDisabled = true;
      this.planFormConfig.formData[2].class = "hide";
      this.addPlanDialog(3);
      this.getDataDetail(id);
    },
    // 获取响应命令单
    getAllResponse() {
      GetResponse({ unitId: this.getCreator.id }).then(res => {
        // console.log(res)
        let options = [];
        options = res.map(item => {
          return {
            label: item.responseName,
            value: item.id,
            ...item
          };
        });
        this.sourceFormConfig.formData[0].option = options;
        this.formData[0].options = options;
      });
    },
    // 选择响应命令单
    eventChangeSelected(val, item) {
      if (val) {
        const filter = this.sourceFormConfig.formData[0].option.filter(item => item.id == val);
        this.eventDataForm = filter[0];
        this.$set(this.$refs.planFormComponent.form, "arrivePostPlanName", `${filter[0].label}到岗到位计划`);
      } else {
        this.eventDataForm = {};
      }
    },
    // 获取所有测试人员
    async getTestUserOption() {
      const res = await TestUserOption({});
      const all_person = res.map(item => {
        item.disabled = false;
        return item;
      });
      this.all_persons = Object.assign(this.all_persons, all_person);
      // console.log("测试人员", this.all_persons)
    },
    // 处理已选人员的禁用
    handlePersonDisabel() {
      const selected_persons = this.selected_persons.map(item => item.userId);
      this.all_persons = JSON.parse(JSON.stringify(this.all_persons)).map(item => {
        item.disabled = selected_persons.includes(item.userId);
        return item;
      });
    },
    // 人员切换
    changePerson(val, row, i) {
      const filters = this.all_persons.filter(item => item.userId == val);
      this.selected_persons[i] = Object.assign(this.selected_persons[i], filters[0]);
      this.handlePersonDisabel();
    },
    closeInJob() {
      this.inJobDialogConfig.isShow = false;
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/common.less";
@import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/pop-upNotification.less";

:deep(.inJobDialog .el-dialog) {
  width: 80vw !important;
}

:deep(.hide) {
  display: none;
}

:deep(.el-descriptions) {
  font-size: 16px;
  padding-top: 10px;
}

:deep(.is-view) {
  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    display: none;
  }

  .el-button {
    display: none;
  }
}

:deep(.formBox .el-form .el-form-item) {
  margin: 5px 20px 15px 0;
}

:deep(.dialog .el-form .el-form-item) {
  margin: 5px 20px 5px 0;
}

:deep(.person-table) {
  .cell {
    font-size: 16px;
  }
}

:deep(.planFormComponent) {
  .el-button {
    width: 90px !important;
  }
}

:deep(.input_readonly) {
  .el-input__inner {
    padding-left: 0;
  }
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

:deep(.el-dialog__title) {
  font-weight: bold;
}

.box {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

:deep(.el-descriptions__body .el-descriptions__table) {
  height: 140px;
}

:deep(.el-descriptions :not(.is-bordered) .el-descriptions-item__cell) {
  padding-bottom: 31px;
}

:deep(.el-select-dropdown__item) {
  padding: 0 20px;
  text-align: left;
}
</style>
